<template>
  <div class="kaoqin">
    <nav-bar title="考勤打卡" />
    <div>
      <div>
        <div class="top">
          <div class="top-left">
            <div class="top-left-img">
              <img src="https://img0.baidu.com/it/u=1171303070,2919172330&fm=26&fmt=auto" />
            </div>
            <div class="top-left-name">{{ user.userName }}</div>
          </div>
          <div class="top-right" @click="toAttendanceRecord">考勤记录</div>
        </div>
      </div>
      <div>
        <div class="bottom">
          <div class="bottom-day">
            <div class="bottom-day-left">
              <!-- <div class="marks">外勤</div> -->
              <div class="bottom-day-left-top">
                <span>上班{{ ClockObject.signTimeOnwork ? ClockObject.signTimeOnwork : '09:00' }}</span>
              </div>
              <div class="bottom-day-left-bottom">
                <van-icon name="checked" v-if="ClockObject.signUpOnwork !== '未打卡' && ClockObject.signUpOnwork" />
                <span>{{ ClockObject.signUpOnwork }}</span>
              </div>
            </div>
            <div class="bottom-day-right">
              <div class="bottom-day-right-top">
                <span>下班{{ ClockObject.signTimeOutwork ? ClockObject.signTimeOutwork : '18:00' }}</span>
              </div>
              <div class="bottom-day-right-bottom">
                <!-- <van-icon name="checked" /> -->
                <van-icon name="checked" v-if="ClockObject.signUpOutwork !== '未打卡' && ClockObject.signUpOutwork" />
                <span>{{ ClockObject.signUpOutwork }}</span>
                <span class="tag" @click="updatePage">更新打卡</span>
              </div>
            </div>
          </div>
          <div class="bottom-radio" v-if="isTrue" @click="punchClock">
            <div class="bottom-radio-title">考勤打卡</div>
            <div class="bottom-radio-time">{{ time | timeFilter }}</div>
          </div>
          <div class="bottom-radio1" v-else>
            <div class="bottom-radio1-title">考勤打卡</div>
            <div class="bottom-radio1-time">{{ time | timeFilter }}</div>
          </div>
          <div class="bottom-address" v-show="address">
            <van-icon name="location-o" />
            <span>{{ address }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Attendance from '@/api/attendance.js'
import mapPlugin from '@/libs/mapPlugin'
import { formatTimes } from '@/libs/tool'
export default {
  data() {
    return {
      isTrue: false,
      timer: null,
      time: new Date(),
      ClockObject: {
        latitude: 0,
        longitude: 0,
        signTimeOnwork: '',
        signTimeOutwork: '',
        signUpOnwork: '',
        signUpOutwork: '',
        code: ''
      },
      longitude: '',
      latitude: '',
      address: ''
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {},
  mounted() {
    this.getPosition()
    this.timer = setInterval(() => {
      this.time = new Date() // 实时显示当前时间
    }, 1000)
    // this.init()
  },
  beforeDestroy() {
    if (this.timer) {
      window.clearInterval(this.timer)
    }
  },
  methods: {
    updatePage() {
      // this.$router.go(0)
      if (this.ClockObject.signUpOnwork && this.ClockObject.signUpOnwork !== '未打卡') {
        const data = {
          signUpOutwork: formatTimes.formatTime(new Date()),
          outAddress: this.address,
          code: this.ClockObject.code
        }
        Attendance.Api.punchClock(data).then(res => {
          const { status } = res
          if (status === 200) {
            this.ClockObject.signUpOutwork = formatTimes.formatHMS(new Date()) + '已打卡'
            this.$toast.success('打卡成功')
          }
        })
      } else {
        this.$toast({
          message: '服务器错误!请联系后台管理人员'
        })
      }
    },
    // 初始化详情
    init() {
      Attendance.Api.detail().then(res => {
        const { data, status } = res
        if (status === 200) {
          this.ClockObject = data.data
        }
      })
    },
    getPosition() {
      const that = this
      // that.ClockObject = {
      //   longitude: 116.295419,
      //   latitude: 39.823411
      // }
      // that.ClockObject = {
      //   longitude: 116.297176,
      //   latitude: 39.825233
      // }
      // that.ClockObject = {
      //   longitude: 116.397108,
      //   latitude: 39.909582
      // }
      mapPlugin.geolocation(res => {
        const lnglat1 = res.position
        const lnglat2 = [that.ClockObject.longitude, that.ClockObject.latitude]
        // console.log(lnglat2, '454545')
        const distance = lnglat1.distance(lnglat2)
        if (distance <= 10000) {
          that.isTrue = true
        } else {
          that.isTrue = false
        }
        that.longitude = res.position.lng
        that.latitude = res.position.lat
        // this.lnglatChange()
        console.log(res, 'weizhi')
        mapPlugin.geocoder(res.position, async res2 => {
          // 查询经纬度信息
          if (res2) {
            that.address = await res2.regeocode.formattedAddress
            // console.log(this.address)
            that.init()
          } else {
            that.$toast.fail('无法获取当前定位')
          }
        })
      })
    },
    // 打卡
    punchClock() {
      if (this.ClockObject.signUpOnwork && this.ClockObject.signUpOnwork !== '未打卡') {
        // alert('下班')
        const data = {
          signUpOutwork: formatTimes.formatTime(new Date()),
          outAddress: this.address,
          code: this.ClockObject.code
        }
        Attendance.Api.punchClock(data).then(res => {
          const { status } = res
          if (status === 200) {
            this.ClockObject.signUpOutwork = formatTimes.formatHMS(new Date()) + '已打卡'
            this.$toast.success('打卡成功')
          }
        })
      } else {
        // alert('上班')
        const data = {
          signUpOnwork: formatTimes.formatTime(new Date()),
          onAddress: this.address
        }
        Attendance.Api.punchClock(data).then(res => {
          const { status } = res
          if (status === 200) {
            this.ClockObject.signUpOnwork = formatTimes.formatHMS(new Date()) + '已打卡'
            this.$toast.success('打卡成功')
          }
        })
      }
    },
    // 考勤记录跳转
    toAttendanceRecord() {
      this.$router.push({
        path: '/campusSecurity/AttendanceRecord'
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import './style/index.less';
</style>
